.main{
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    /* teplete模板的意思 */
    /* 注意事项：100px和100px之间不需要逗号隔开 */
    /* grid-template-columns: 100px 100px 100px;   */
    /* 设置最大最小值 */
    /* grid-template-columns: 1fr minmax(10px,1fr); */
    /* auto是自动调节，很常用 */
    /* grid-template-columns: 100px auto 100px; */
    grid-template-columns: 100px 100px 100px;
    /* 缩写 */
    /* grid-template-rows: repeat(4, 120px); */
    /* fr等比例的意思 */
    /* grid-template-rows: 1fr 2fr 3fr; */
    /* 定义网格线 */
    grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4] ;
    /* gap是容器属性，注意 */
    /* column-gap: 20px; */
    /* row-gap: 20px; */
    /* 当column和row的间距一样，可以简写为gap：20px */
    gap: 20px;
    grid-area:  'a b c'
                'b b b'
                'g h i j';
    /* cloumn竖着排列  系统默认横着排列 */
    /* grid-auto-flow: column; */
    /* 容器属性 对齐属性 justify水平方向 align垂直方向  记得是items*/
    /* justify-items: stretch; */
    /* align-items: center; */
    /*place-items是justify-items和align-items的合并简写  */
    /* place-items: center center; */
    /*  justify-content是整块内容区域的对齐方式的属性*/
    /* justify-content: center; */
    /* align-content: center; */
    /*  grid-auto-rows用来设置多出来的行的参数*/
    grid-auto-rows: 100px;

}

.item{
   
    font-size: 50px;
    background-color:red;
    color:#fff;
    
    
}

.item-1{
    background-color:rgb(246, 132, 80);
    /* grid-column-start  grid-column-end这俩个是项目属性：从第几根线到第根线  指定item的位置*/
    /* grid-column-start: 1; */
    /* grid-column-end: 3; */
    /* 上面两行可简写合并 中间参数用左斜杠隔开 */
    /* grid-column: 1 / 4; */
    /* span表示跨越几行   从start开始跨2行 */
    /* grid-row-start: span 2; */
    /* grid-area指定项目放在哪个位置  难点 */
    /* grid-area: 1/1/3/3; */
    /* 单个项目item的对齐方式 */
    justify-self: center;
    align-self: center;
}
.item-2{
    background-color: rgb(241, 190, 50);
}
.item-3{
    background-color:rgb(246, 132, 80);
}
.item-4{
    background-color: rgb(241, 190, 50);
}
.item-5{
    background-color:rgb(246, 132, 80);
}
.item-6{
    background-color: rgb(241, 190, 50);
}
.item-7{
    background-color:rgb(246, 132, 80);
}
.item-8{
    background-color: rgb(241, 190, 50);
}
.item-9{
    background-color:rgb(246, 132, 80);
}
.item-10{
    background-color: rgb(241, 190, 50);
}
